<!-- 课程应该是视频 -->
<template>
  <div class="MyCourse-container">
    <div class="MyCourse-container-top">
      <div class="MyCourse-container-top-header">
        <div class="MyCourse-container-top-header-left">
          <el-cascader
              class="MyCourse-cascader"
              v-model="selectCategory"
              filterable
              :props="props"
              :show-all-levels="false"
              @change="handleChange"
          />
        </div>
        <div class="MyCourse-container-top-header-right">
          <div
              class="MyCourse-container-top-header-right-text"
              :class="{ active: true }"
          >
            付费课
          </div>
        </div>
      </div>
      <div class="MyCourse-container-content" v-if="!showChapterVideo&&columnsList.length == 0">
        <img :src="empty_img" alt="" class="empty"/>
        <p class="empty-text">
          <span>亲爱的学员，您还未购买课程</span><br/>
          <span>无法开始听课哦~</span>
        </p>
        <el-button type="primary" round class="btn">去购买</el-button>
      </div>
      <div class="columns-container" v-else-if="!showChapterVideo&&columnsList.length > 0">
        <div class="grid-columns">
          <div v-for="item in columnsList" :key="item.id" class="grid-column-item" @click="seeChapterVideo(item)">
            <div>
              <span>
                {{ item.name }}
              </span>
              <sub class="sub-text">
                视频
              </sub>
            </div>
            <div class="grid-column-item-icon">
            </div>
          </div>
        </div>
      </div>
      <ChapterVideo @goBack="goBack" :columnId="selectColumnId" v-if="showChapterVideo"/>
    </div>
    <div></div>
  </div>
</template>
<script setup>
import {ref} from "vue";
import empty_img from "@/assets/images/empty_img.png";
import HomeApis from "@/apis/home.js";
import ListApis from "@/apis/list.js";
import VideoApis from "@/apis/video.js";
import MyResourceApis from "@/apis/myResource.js";
import useUserStore from "@/stores/user.js";
import ChapterVideo from "@/views/mine/components/ChapterVideo.vue";


const columnsList = ref([]);
const userStore = useUserStore();
let selectCategory = ref(null)
const showChapterVideo=ref(false)
const selectColumnId = ref(null);

// let selectCategory=computed(() => {
//     return userStore.selectCategory
// })

async function getSelectCategory() {
  const res = await HomeApis.currentChoose()
  selectCategory.value = [
    res.data.industryCode,
    res.data.examId,
    res.data.categoryId,
  ];
  return res
}


function goBack(){
  showChapterVideo.value=false
}
// 根据获取课程
function getColumnsByCategory(data) {

  // 获取科目
  if (data) {
    MyResourceApis.myBuyAsset({
      params: {type: 'video', categoryIds: data.categoryId}
    }).then((res) => {

        if(res.data.length>0){
          for (let item of res.data){
            if(item.efficientStatus!=="invalid"){
              columnsList.value = item.columnModels;
              break;
            }
          }
          if(columnsList.value===null||columnsList.value.length===0){
            columnsList.value = res.data[0].columnModels;
          }
        }else{
          columnsList.value = [];
        }
    })
  }

  // VideoApis.chapterList({
  //   params: {
  //     categoryId: data.categoryId,
  //     columnId: data.columnId,
  //   },
  // }).then((res) => {
  //   // 有没有子章节
  //   if (res.code == 1 && res.data) {
  //     columnsList.value = res.data;
  //   }
  // });
}

const props = ref({
  // multiple: true,
  lazy: true,
  lazyLoad(node, resolve) {
    const {level} = node;
    // console.log(node, level)
    if (level == 0) {
      ListApis.industryList().then((res) => {
        if (res.code == 1 && res.data) {
          res.data.forEach((item) => {
            item.label = item.name;
            item.value = item.id;
            item.leaf = false;
          });
          resolve(res.data);
        } else {
          resolve([]);
        }
      });
    } else if (level == 1) {
      ListApis.examByIndustry({
        params: {
          size: 1000,
          industryId: node.value,
        },
      }).then((res) => {
        if (res.data) {
          res.data.forEach((item) => {
            item.label = item.name;
            item.value = item.id;
            item.leaf = false;
          });
          resolve(res.data);
        } else {
          resolve([]);
        }
      });
    } else if (level == 2) {
      ListApis.leafList({
        params: {examId: node.value, parentId: 0},
      }).then((res) => {
        if (res.data) {
          res.data.forEach((item) => {
            item.label = item.name;
            item.value = item.id;
            item.leaf = item.hasChild ? false : true;
          });
          resolve(res.data);
        } else {
          resolve([]);
        }
      });
    } else {
      ListApis.leafList({
        params: {examId: node.data.examId, parentId: node.value},
      }).then((res) => {
        if (res.data) {
          res.data.forEach((item) => {
            item.label = item.name;
            item.value = item.id;
            item.leaf = item.hasChild ? false : true;
          });
          resolve(res.data);
        } else {
          resolve([]);
        }
      });
    }
  },
});


function seeChapterVideo(item){
  selectColumnId.value=item.id
  showChapterVideo.value=true
}
function handleChange(val) {
  getColumnsByCategory({categoryId: val.at(-1)})
  // 设置本地并请求
  HomeApis.settingChoose({
    categoryList: [{categoryId: val.at(-1), ifCheck: true}],
  }).then((res) => {
    if (res.code == 1) {
      showChapterVideo.value=false
      userStore.setSelectCategory({
        examId: val[1],
        industryId: val[0],
        industryCode: val[0],
        categoryCode: val.at(-1),
        categoryId: val.at(-1),
      });

      // router.push({name: 'MyCourse'})
    }
  });
}

function init() {
  getSelectCategory().then((res) => {
    getColumnsByCategory(res.data)
  });
}

init();
</script>

<style scoped>
.MyCourse-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.MyCourse-container-top {
  height: 650px;
  background: white;
  border-radius: 12px;
}

.MyCourse-container-top-header {
  background: #f8fbff;
  height: 50px;
  display: flex;
  align-items: center;
  padding: 0 22px;
}

.MyCourse-container-top-header-right {
  display: flex;
  gap: 31px;
}

.MyCourse-container-top-header-right-text {
  padding: 0 16px;
  line-height: 50px;
}

.MyCourse-container-top-header-right-text.active {
  color: #ffffff;
  background: #409eff;
}

.MyCourse-cascader {
  height: 50px;
}

.MyCourse-container-content {
  box-sizing: content-box;
  padding: 100px;
  display: flex;
  align-items: center;
  gap: 30px;
  flex-direction: column;
}

.MyCourse-container-content img.empty {
  width: 290px;
  height: 168px;
}

.MyCourse-container-content .empty-text {
  text-align: center;
  color: #333;
  font-size: 14px;
  font-weight: 400;
  line-height: 28px;
}

.MyCourse-container-content .btn {
  padding: 8px 28px;
}

.columns-container {
  padding: 20px 80px;
}

.grid-columns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 150px;
  gap: 32px;
}
.grid-column-item{
  cursor: pointer;
  border-radius: 10px;
  box-shadow: 0px 4px 20.4px 0px rgba(60, 108, 255, 0.11);

  padding: 24px;


  font-size: 32px;
  font-weight: 600;
  color: var(--gray_20);
  margin-left: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.grid-column-item :hover{
  scale: 1.05;
}
.grid-column-item-icon{
  width: 36px;
  height: 36px;
  background: var(--arrow) no-repeat;
  background-size: 100%;
}
.grid-column-item .sub-text{
  font-style: italic;
  font-size: 14px;
  color: red;
  text-shadow: 0 0 3px rgba(255, 0, 0, 0.4);
}
</style>
